<div class="panel panel-default panel-intro">
    {:build_heading()}
    <style>
        .stats-container {
            font-family: Arial, sans-serif;
            margin: 20px;
            max-width: 800px;
        }
        .stat-line {
            display: flex;
            align-items: center;
            padding: 12px 15px;
            margin-bottom: 8px;
            border-radius: 4px;
            background: #f8f9fa;
        }
        .income {
            border-left: 4px solid #28a745;
        }
        .expense {
            border-left: 4px solid #dc3545;
        }
        .balance {
            border-left: 4px solid #17a2b8;
            margin-top: 15px;
            background: #e8f4f8;
        }
        .stat-label {
            font-weight: bold;
            min-width: 80px;
            color: #495057;
        }
        .stat-value {
            margin-left: 15px;
            font-weight: bold;
        }
        .income .stat-value {
            color: #28a745;
        }
        .expense .stat-value {
            color: #dc3545;
        }
        .balance .stat-value {
            color: #17a2b8;
            font-size: 1.1em;
        }
        .stat-detail {
            margin-left: 25px;
            color: #6c757d;
        }
        .stat-detail span {
            margin-right: 20px;
        }
        .date-line {

            margin-bottom: 10px;
            color: #6c757d;
            font-size: 0.9em;
        }
    </style>
    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="widget-body no-padding">
                    <div id="toolbar" class="toolbar">
                        <a href="javascript:;" class="btn btn-primary btn-refresh" title="{:__('Refresh')}" ><i class="fa fa-refresh"></i> </a>
                      <!--  <a href="javascript:;" class="btn btn-success btn-add {:$auth->check('ltdaylog/add')?'':'hide'}" title="{:__('Add')}" ><i class="fa fa-plus"></i> {:__('Add')}</a>
                        <a href="javascript:;" class="btn btn-success btn-edit btn-disabled disabled {:$auth->check('ltdaylog/edit')?'':'hide'}" title="{:__('Edit')}" ><i class="fa fa-pencil"></i> {:__('Edit')}</a>
                        <a href="javascript:;" class="btn btn-danger btn-del btn-disabled disabled {:$auth->check('ltdaylog/del')?'':'hide'}" title="{:__('Delete')}" ><i class="fa fa-trash"></i> {:__('Delete')}</a>
                        -->

                        

                        
                    </div>
                    <table id="table" class="table table-striped table-bordered table-hover table-nowrap"
                           data-operate-edit="{:$auth->check('ltdaylog/edit')}"
                           data-operate-del="{:$auth->check('ltdaylog/del')}"
                           width="100%">
                    </table>
                </div>
            </div>
            {notempty name="log_date"}
            <!-- 收入行 -->
            <div class="date-line">
                统计日期：{$log_date}
            </div>
            <div class="stat-line income">
                <div class="stat-label">总收入</div>
                <div class="stat-value">{$shouru}</div>
                <div class="stat-detail">
                    {volist name="slist" id="vo"}
                    <span>{$vo.memo}: {$vo.sum}</span>
                    {/volist}
                </div>
            </div>

            <!-- 支出行 -->
            <div class="stat-line expense">
                <div class="stat-label">总支出</div>
                <div class="stat-value">{$zhichu}</div>
                <div class="stat-detail">
                    {volist name="zlist" id="vo"}
                    <span>{$vo.memo}: {$vo.sum}</span>
                    {/volist}
                </div>
            </div>

            <!-- 结余行（自动计算） -->
            <div class="stat-line balance">
                <div class="stat-label">结余</div>
                <div class="stat-value">{$jieyu}</div>
                <div class="stat-detail">

                </div>
            </div>
            {/notempty}
        </div>
    </div>
</div>
